<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        /* 滑动控件容器,亮灰色背景 */
        #dragContainer {
            position: relative;
            display: inline-block;
            background: #e8e8e8;
            width: 300px;
            height: 33px;
            border: 2px solid #e8e8e8;
        }
        /* 滑块左边部分,绿色背景 */
        #dragBg {
            position: absolute;
            background-color: #7ac23c;
            width: 0px;
            height: 100%;
        }
        /* 滑动验证容器文本 */
        #dragText {
            position: absolute;
            width: 100%;
            height: 100%;
            /* 文字水平居中 */
            text-align: center;
            /* 文字垂直居中,这里不能用百分比,因为百分比是相对原始line-height的,而非div高度 */
            line-height: 33px;
            /* 文本不允许选中 */
            user-select: none;
            -webkit-user-select: none;
        }
        /* 滑块 */
        #dragHandler {
            position: absolute;
            width: 40px;
            height: 100%;
            cursor: move;
        }
        /* 滑块初始背景 */
        .dragHandlerBg {
            background: #fff no-repeat center url("");
        }
        /* 验证成功时的滑块背景 */
        .dragHandlerOkBg {
            background: #fff no-repeat center url("");
        }
    </style>
    <script>
        window.onload = function() {
            var dragContainer = document.getElementById("dragContainer");
            var dragBg = document.getElementById("dragBg");
            var dragText = document.getElementById("dragText");
            var dragHandler = document.getElementById("dragHandler");

            //滑块最大偏移量
            var maxHandlerOffset = dragContainer.clientWidth - dragHandler.clientWidth;
            //是否验证成功的标记
            var isVertifySucc = false;
            initDrag();

            function initDrag() {
                dragText.textContent = "拖动滑块验证";
                dragHandler.addEventListener("mousedown", onDragHandlerMouseDown);
            }

            function onDragHandlerMouseDown() {
                document.addEventListener("mousemove", onDragHandlerMouseMove);
                document.addEventListener("mouseup", onDragHandlerMouseUp);
            }

            function onDragHandlerMouseMove() {
                /*
                html元素不存在width属性,只有clientWidth
                offsetX是相对当前元素的,clientX和pageX是相对其父元素的
                */
                var left = event.clientX - dragHandler.clientWidth / 2;
                if(left < 0) {
                    left = 0;
                } else if(left > maxHandlerOffset) {
                    left = maxHandlerOffset;
                    verifySucc();
                }
                dragHandler.style.left = left + "px";
                dragBg.style.width = dragHandler.style.left;
            }
            function onDragHandlerMouseUp() {
                document.removeEventListener("mousemove", onDragHandlerMouseMove);
                document.removeEventListener("mouseup", onDragHandlerMouseUp);
                dragHandler.style.left = 0;
                dragBg.style.width = 0;
            }

            //验证成功
            function verifySucc() {
                isVertifySucc = true;
                dragText.textContent = "验证通过";
                dragText.style.color = "white";
                dragHandler.setAttribute("class", "dragHandlerOkBg");
                dragHandler.removeEventListener("mousedown", onDragHandlerMouseDown);
                document.removeEventListener("mousemove", onDragHandlerMouseMove);
                document.removeEventListener("mouseup", onDragHandlerMouseUp);
            };
        }
    </script>
</head>
<body>
<div id="dragContainer">
    <div id="dragBg"></div>
    <div id="dragText"></div>
    <div id="dragHandler" class="dragHandlerBg"></div>
</div>
</body>
</html>